<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding: 0}
		#box{			
			background: #fff;
			margin: 50px 0 0;		
		}
		#box table tr td{
			width: 200px;
			height: 200px;
		}
		#box table tr td:hover{
			background: red;
		}
	</style>
</head>
<body>
	<div>
		<input type="text" id="inp">
		<div id="box"></div>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		var inp = document.getElementById("inp");
		var box = document.getElementById("box");
		var createDiv = function(n){
			var str = "<table>";
			for(var i=0;i<n;i++){
				str +="<tr>"
				for(var j = 0;j<n;j++){
					str+="<td class='bbb'></td>"
				}
				str +="</tr>"
			}
			str += "</table>"
			box.innerHTML = str;			
		}
		inp.onchange = function(){
			if(parseInt(inp.value)){
				createDiv(inp.value);
			}	
		}		
		$(document).on("click",".bbb",function(){
			console.log($(this).css('backgroundColor'));
			if($(this).css('backgroundColor') === "rgb(255, 0, 0)"){
				$(this).css('backgroundColor','blue')
			}else{
				$(this).css('backgroundColor','#fff');
				$(this).hover(function(){
					$(this).css('backgroundColor','red');
				},function(){
					$(this).css('backgroundColor','#fff');
				});
			}
		});
	</script>
</body>
</html>